<template>
  <div class="tiny-table relative flex-1">
    <div class="px-[16px]">
      <el-table
        ref="table"
        :data="list"
        :max-height="maxHeight"
        v-bind="{
          rowKey: 'id',
          ...$attrs,
        }"
        v-on="$listeners"
      >
        <el-table-column v-if="showSelection" type="selection" width="50" align="center" reserve-selection />
        <el-table-column v-if="showIndex" type="index" label="序号" fixed="left" width="60" :index="handleIndex" />
        <el-table-column
          v-for="(item, cIndex) in cols"
          :key="cIndex"
          v-bind="{ prop: item.prop, showOverflowTooltip: true, ...(item.columnProps || {}) }"
          v-on="item.columnListeners"
        >
          <template v-if="item.headerName" slot="header">
            <slot :name="item.headerName"> </slot>
          </template>
          <template slot-scope="scope">
            <slot v-if="item.component === 'slot'" :name="item.prop" v-bind="scope"></slot>
            <span v-else-if="item.component === 'systemDic'">
              {{ $store.state.data.KV_MAP[item.KV_MAP][scope.row[item.prop]] }}
            </span>
            <template v-else-if="!item.component">
              {{ scope.row[item.prop] }}
            </template>
            <template v-else>
              <component
                :is="item.component"
                v-model="scope.row[item.prop]"
                v-bind="item.componentProp"
                :class="item.componentClass"
                v-on="item.componentListeners"
              >
              </component>
            </template>
          </template>
        </el-table-column>
        <slot name="otherSlot" />
        <template slot="empty">
          <t-empty-data />
        </template>
      </el-table>
    </div>

    <div v-if="page" class="s-t-b absolute bottom-0 right-0 mt-[1px] flex h-[64px] w-full items-center justify-end">
      <el-pagination
        ref="pagination"
        class="mr-[16px] flex-1 text-right"
        :total="total === -1 ? allData?.length : total"
        :page-size="pageSize"
        :current-page="pageNumber"
        v-bind="{ background: true, layout, pageSizes, ...(paginationProp || {}) }"
        @size-change="handleSizeChange"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
// import utils from "@/utils/utils";
export default {
  name: "TinyTable",
  props: {
    //列
    cols: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //是否使用分页
    page: {
      type: Boolean,
      default: true,
    },
    //表格所有数据
    tableData: {
      type: Array,
      default: () => {
        return null;
      },
    },
    //获取表格数据方法
    getTableData: {
      type: Function,
      default: null,
    },
    //表格查询参数
    tableParams: {
      type: Object,
      default: null,
    },

    //查询页数参数名称
    pageNumberString: {
      type: String,
      default: () => "pageIndex",
    },
    //查询每页条数参数名称
    pageSizeString: {
      type: String,
      default: () => "length",
    },
    //序号列
    showIndex: {
      type: Boolean,
      default: false,
    },
    //选中列
    showSelection: {
      type: Boolean,
      default: false,
    },
    //自动查询
    autoQuery: {
      type: Boolean,
      default: false,
    },
    // 分页组件属性
    paginationProp: {
      type: Object,
      default: null,
    },
  },

  data() {
    return {
      layout: "total, sizes, prev, pager, next, jumper", // 组件布局
      pageSizes: [10, 20, 30, 40, 50], //每页条数
      maxHeight: 0, //表格最大高度
      pageNumber: 1, //当前页
      pageSize: 10, //每页条数
      list: [], // 当前表格数据
      total: -1, //总条数
    };
  },

  computed: {
    allData() {
      return this.tableData || [];
    },
  },

  watch: {
    getTableData: {
      immediate: false,
      handler(newValue) {
        if (newValue) {
          //分页
          if (this.page) {
            this.pageChange();
          } else {
            //
          }
        }
      },
    },
    tableData: {
      immediate: false,
      handler(newValue) {
        if (newValue) {
          //分页
          if (this.page) {
            this.pageChange();
          } else {
            this.list = newValue;
          }
        }
      },
    },
  },
  mounted() {
    this.handleResize();
    window.addEventListener("resize", this.handleResize);
    if (this.autoQuery) {
      this.pageChange();
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.handleResize);
  },
  updated() {
    this.$nextTick(() => {
      const pageHeight = this.page ? 65 : 5;
      this.maxHeight = this.$el.clientHeight - pageHeight;
      this.$refs["table"].doLayout();
    });
  },
  methods: {
    handleSizeChange(pageSize) {
      this.pageSize = pageSize || this.pageSize;
      this.pageChange();
    },
    pageChange(pageNumber) {
      this.pageNumber = pageNumber || this.pageNumber;
      if (this.getTableData) {
        this.getTableData({
          ...{
            [this.pageNumberString]: this.pageNumber,
            [this.pageSizeString]: this.pageSize,
          },
          ...this.tableParams,
        }).then((res) => {
          const { content: list = [], totalElements: total = 0 } = res;
          this.list = list;
          this.total = total;
        });
      } else {
        const start = (this.pageNumber - 1) * this.pageSize;
        this.list = [];
        for (let index = start; index < start + this.pageSize; index++) {
          this.allData[index] && this.list.push(this.allData[index]);
        }
      }
    },

    handleIndex(index) {
      if (this.page) {
        return (this.pageNumber - 1) * this.pageSize + (index + 1);
      } else {
        return index + 1;
      }
    },

    handleResize() {
      this.$nextTick(() => {
        const pageHeight = this.page ? 65 : 5;
        this.maxHeight = this.$el.clientHeight - pageHeight;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table--border::after,
.el-table--group::after,
.el-table::before,
::v-deep .el-table__fixed::before,
::v-deep .el-table__fixed-right::before {
  background-color: transparent;
}

::v-deep span.el-pagination__total {
  height: 32px;
  line-height: 32px;
}
</style>
